<template>
  <div class="backgd">
    <div class="top">
      <el-button type="primary" @click="addAdvice">新增意见</el-button>
    </div>
    <el-table :data="advicelist" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column label="日期"  prop="date" sortable>
      </el-table-column>
      <el-table-column label="建议" width="520"  prop="advice">
      </el-table-column>
      <el-table-column label="答复" width="520"  prop="reply">
      </el-table-column>
      <el-table-column label="答复人"  prop="replyer" sortable>
      </el-table-column>
    </el-table>
    <el-dialog title="信息" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form">
        <el-form-item label="建议" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 6 }"
            placeholder=""
            v-model="form.advice"
            maxlength="160"
            show-word-limit
            resize="none"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exitsubmit">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { v4 as uuidv4 } from "uuid";
var dayjs = require("dayjs");
// import dayjs from 'dayjs' // ES 2015
dayjs().format();
export default {
  name: "AdviceList",
  mounted() {
    this.all();
  },
  data() {
    return {
      addDate: "",
      dialogFormVisible: false,
      formLabelWidth: "60px",
      form: {
        advice: "",
      },
      advicelist: [
        {
          date: "2016-05-02",
          advice:
            "上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区",
          reply:
            "上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区上海市普陀区",
        },
      ],
    };
  },
  methods: {
    addAdvice() {
      if (localStorage.getItem("student")) {
        var now = dayjs();
        // console.log(now);
        this.addDate = now.$y + "-" + (now.$M + 1) + "-" + now.$D;
        // console.log(this.addDate);
        this.dialogFormVisible = true;
      } else {
        alert("请先登录");
      }
    },
    submit() {
      if (this.form.advice == "") {
        alert("请输入意见或建议");
      } else {
        this.add();
        this.form.advice = "";
        this.dialogFormVisible = false;
      }
    },
    exitsubmit() {
      this.dialogFormVisible = false;
    },
    all() {
      //查找info表全部数据
      axios
        .get("http://127.0.0.1/advicelist_yang/all")
        .then((res) => {
          // console.log(res.data);
          this.advicelist = res.data;
          // console.log(this.advicelist);
        })
        .catch((err) => {
          console.log("获取数据失败" + err);
        });
    },
    add() {
      //添加操作
      axios
        .get("http://127.0.0.1/advicelist_yang/add", {
          params: {
            id: uuidv4(),
            student: localStorage.getItem("student"),
            advice: this.form.advice,
            date: this.addDate,
            reply: "",
          },
        })
        .then((res) => {
          console.log(res);
          this.all();
        })
        .catch((err) => {
          console.log("获取数据失败" + err);
        });
    },
  },
};
</script>

<style>
.backgd {
  position: relative;
  width: 1316px;
  height: 700px;
  margin: 20px 300px 0 300px;
  border: 2px solid #1e874c;
  overflow-y: auto;
}
.top {
  height: 60px;
  width: 1316px;
}
</style>